<template>
  <div class="learingList">
    <div></div>
    <div class="listBox">
      <mt-navbar v-model="selected">
        <mt-tab-item id="houduan">后端开发</mt-tab-item>
        <mt-tab-item id="php">PHP</mt-tab-item>
        <mt-tab-item id="java">JAVA</mt-tab-item>
        <mt-tab-item id="qianduan">前端开发</mt-tab-item>
      </mt-navbar>

      <!-- tab-container -->
      <mt-tab-container v-model="selected" >
        <mt-tab-container-item id="qianduan">
          <div class="banner"><img src="holder.js/200x200" alt=""></div>
          <div class="labs">
              <!-- 标题 -->
              <router-link :to="'/list/all/'">php</router-link>
              
          </div>
          <div class="tit">推荐课程</div>
          <div class="recLabs">
            <!-- 推荐课程 -->
              <router-link :to="'/list/all/'">php</router-link>
              <router-link :to="'/list/all/'">php</router-link>
              <router-link :to="'/list/all/'">php</router-link>
              <router-link :to="'/list/all/'">php</router-link>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'learingList',
    data: function () {
      return {
        selected: 'qianduan'
      };
    }
   }
</script>

<style lang="scss">
  @import "../assets/baseScss";
.learingList{
  .listBox{
    display: flex;
    .mint-navbar{
      display: block;
      flex: 2;
      .mint-tab-item{
        border-left: 3px solid $cl1;
        border-bottom: 3px solid $cl1;
      }
      .is-selected{
        background: $cl5;
        border-bottom: 3px solid $cl1;
        border-left: 3px solid $cl0;
      }
    }
    .mint-tab-container{
      text-align: center;
      line-height: 30px;
      flex: 6;
      a{
        color:$cl6;
        display: block;
        background: $cl1;
        margin:10px 15px 0px 0px;
        font-size: 15px;
        line-height: 40px;
      }
      .banner{
        padding:15px 15px 0px 15px;
      }
      .labs{
        display: flex;
        flex-wrap:wrap;
        padding-left: 15px;
        a{
          flex-grow: 2;
          width: 40%;
        }
      }
      .tit{
        text-align: left;
        padding:10px 0px 0px 15px;
        color:$cl3;
      }
      .recLabs{
        padding-left: 15px;
      }
    }
  }
}
</style>
